<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Fancy border radius</title>
	<style>
		:root {
			--background: #cb7175;
			--primary: #cb7175;
			--secondary: #cb7175;
			--third: #cb7175;
		}

		* {
			box-sizing: border-box;
		}

		body {
			background:transparent;
		}

		.container {
			align-items: center;
			display: flex;
			height: 100vh;
			justify-content: center;
		}

		.shape {
			background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
			animation: morph 8s ease-in-out infinite;
			border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
			height: 500px;
			transition: all 1s ease-in-out;
			width: 500px;
			z-index: 5;
		}

		@keyframes morph {
			0% {
				border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
				background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
			}
			50% {
				border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
				background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
			}
			100% {
				border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
				background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
			}
		}

	</style>
</head>
<body>
<!-- partial:index.partial.html -->
<html>
	<body>
		<div class="container">
  		<div class="shape"></div>
		</div>
	</body>
</html>
<!-- partial -->

</body>
</html>
